<template>
  <el-card>
    <div slot="header">
      <h3>删除销售区域-单据查看</h3>
    </div>
    <div v-loading="pageLoading">
      <!-- 发起原因输入框 -->
      <LaunchReasonInput isDisabled :reason.sync="recordInfo.launchReason" />
      <el-row>
        <SkusTable
          ref="skusTable"
          :defaultMinWidth="100"
          :tableHeight="480"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
          :loading="TableInfo.loading"
        />
      </el-row>
      <FooterFields :fields-data="recordInfo" :fields-items="fieldsItems" />
    </div>
  </el-card>
</template>
<script>
import LaunchReasonInput from '@/components/LaunchReasonInput';
import TextTooltip from '@/components/ShowContent/TextTooltip';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { TableInfo } from '@/utils/getUtils';
import { TABLE_COLUMNS, FOOTER_ITEMS } from './constants';
import { recordInfoService } from '@/api/commodity/commodityInfoEdit/saleAreaDelete';
export default {
  components: {
    LaunchReasonInput,
    TextTooltip,
    SkusTable,
    FooterFields
  },
  data () {
    return {
      pageLoading: false, // 页面loading
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      recordInfo: {}, // 单据字段
      fieldsItems: FOOTER_ITEMS
    }
  },
  mounted () {
    this.setPageDetailsData()
  },
  methods: {
    // 设置页面详情信息
    async setPageDetailsData () {
      const data = { recordNo: this.$route?.query?.recordNo }
      const loadingFn = state => { this.pageLoading = state }
      const res = await recordInfoService(data, loadingFn)
      const { recordInfo, detailList } = res?.retData ?? {}
      this.recordInfo = recordInfo ?? {}
      this.TableInfo.setList(detailList)
      this.updateFooterItems()
    },
    // 更新表尾字段渲染项集合
    updateFooterItems () {
      if (this.recordInfo?.commitState == 'FAIL') {
        this.fieldsItems = [...FOOTER_ITEMS, { prop: 'reason', label: '审核失败原因：' }]
      } else {
        this.fieldsItems = [...FOOTER_ITEMS]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.show-content {
  max-width: 400px;
  color: #85888e;
  font-size: 13px;
  line-height: 13px;
}
</style>
